<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vivo</title>
</head>

<body>
    <div class="content">
        <div class="imgOld" style="position:fixed;"></div>
        <div class="imgNew" style="opacity:0;"></div>
    </div>
    <div class="content">
        <div class="imgDusk" style="opacity: 0;"></div>
        <div class="imgEvening" style="opacity: 0;"></div>
    </div>
    <div class="content">
        <div class="imgs"></div>
    </div>
    <div class="content">
        <div class="imgOld" style="position:fixed;"></div>
        <div class="imgNew" style="opacity:0;"></div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        padding-bottom: 10000px;
    }

    .imgOld {
        top: 0;
        width: 100%;
        height: 100vh;
        background: url(section-photosold.jpg) no-repeat center center /cover;
    }

    .imgNew {
        top: 0;
        width: 100%;
        height: 100vh;
        background: url(section-photosold-on.jpg) no-repeat center center /cover;
    }

    .imgDusk {
        top: 0;
        width: 100%;
        height: 100vh;
        background: url(section-ltm-open.jpg) no-repeat center center /cover;
    }

    .imgEvening {
        top: 0;
        width: 100%;
        height: 100vh;
        background: url(section-ltm.jpg) no-repeat center center /cover;
    }

    .imgs {
        top: 0;
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center center;
    }
</style>
<script>
    // 内容高度
    console.log(document.querySelectorAll('.content')[0].children);
    const contentHeight = document.querySelector('.content').offsetHeight
    window.onscroll = () => {
        // 滚动高度
        const num = document.documentElement.scrollTop / contentHeight
        let i = num / 100
        console.log(num);
        if (num <= 1) {
            console.log(document.querySelectorAll('.content'));
            document.querySelector('.imgOld').style.position = 'fixed'
            document.querySelector('.imgNew').style.position = 'fixed'
            document.querySelector('.imgNew').style.opacity = num
            document.querySelector('.imgDusk').style.opacity = '0'
            document.querySelector('.imgEvening').style.opacity = '0'
        }
        else if (num > 1 && num <= 2) {
            document.querySelector('.imgOld').style.position = 'static'
            document.querySelector('.imgNew').style.position = 'static'
            document.querySelector('.imgDusk').style.opacity = '1'
            document.querySelector('.imgEvening').style.opacity = '1'
            document.querySelector('.imgDusk').style.position = 'static'
            document.querySelector('.imgEvening').style.position = 'static'
        }
        else if (num > 2 && num <= 3) {
            document.querySelector('.imgDusk').style.position = 'fixed'
            document.querySelector('.imgEvening').style.position = 'fixed'
            document.querySelector('.imgs').style.position = 'static'
            document.querySelector('.imgDusk').style.opacity = '1'
            document.querySelector('.imgEvening').style.opacity = num - 2
        }
        else if (num > 3 && num <= 4) {
            setCss(getAllDom('content'), 'static')
            const img = new Image()
            img.src = `https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_0.jpg`
            img.onload = () => {
                document.querySelector('.imgs').style.backgroundImage = `url(https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_0.jpg)`
            }
        }
        else if (num > 4 && num <= 5) {
            document.querySelector('.imgs').style.position = 'fixed'
            const img = new Image()
            if (Math.round((num - 4) / i) <= 49) {
                img.src = `https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_${Math.round((num - 4) / i)}.jpg`
                img.onload = () => {
                    document.querySelector('.imgs').style.backgroundImage = `url(https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_${Math.round((num - 4) / i)}.jpg)`
                }
            }
        }
        else if (num > 5) {
            document.querySelector('.imgs').style.position = 'static'
            document.querySelector('.imgs').style.paddingTop = '714px'
            const img = new Image()
            img.src = `https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_49.jpg`
            img.onload = () => {
                document.querySelector('.imgs').style.backgroundImage = `url(https://wwwstatic.vivo.com.cn/vivoportal/files/resource/product/1603437675413/images/camera_49.jpg)`
            }
        }
    }
    function setCss(dom, position) {
        dom.forEach(item => {
            item.style.position = position
        })
    }
    function getAllDom(className) {
        let domArr = []
        document.querySelectorAll('.' + className).forEach(dom => {
            for (let childDom of dom.children)
                domArr.push(childDom)
        })
        return domArr
    }
    function doubleImg(className) {
        document.querySelectorAll('.content')[0].children
    }
</script>

</html>